import React, { useState, useEffect } from 'react';
import { history } from './history';
export const RouterContext = React.createContext<RouterContextProps | null>(
  null
);
interface RouterContextProps {
  history: typeof history;
  location: Location;
}

export const Router: React.FC<any> = (props) => {
  const { children } = props;
  const [location, setLocation] = useState(history.location);
  useEffect(() => {
    const unListen = history.listen((location: any) => {
      setLocation(location);
    });
    return unListen;
  }, []);
  return (
    <RouterContext.Provider value={{ history, location }}>
      {children}
    </RouterContext.Provider>
  );
};
